<!doctype html>
<html lang="en">
<head>
	<title>barChart - Dark</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			$("#wijbarchart").wijbarchart({
			legend: {visible: false},
			shadow: false,
			textStyle:
			{
				fill: "#b2b2b2",
				"font-weight" : "bold",
				"font-size":15
			},
				axis: {
					y: {
						labels: {
							
							style: {
								fill: "#242529",
								"font-size": 11
							}
						},
						gridMajor: {
							style:{stroke:"#353539","stroke-dasharray":"- "}
						}
					},
					x: {
						labels: {
							style: {
								fill: "#7f7f7f",
								"font-size": 11
							}
						}
					}
				},
			hint: {
				content: function () {
					return this.data.label + '\n ' + this.y + '';
				}
			},
			header: {
				text: "Concurrent Steam Users (most recent 48 hours)"
			},
			seriesList: [{
				label: "US",
				legendEntry: true,
						data: {
							x: ['10/27/2010 11:48:00',
							 '10/27/2010 13:47:00',
							  '10/27/2010 15:46:00',
							  '10/27/2010 17:45:00',
							   '10/27/2010 19:44:00',
								'10/27/2010 21:43:00',
								 '10/27/2010 23:41:00',
								  '10/28/2010 1:40:00',
								   '10/28/2010 3:39:00',
									'10/28/2010 5:38:00',
									 '10/28/2010 7:37:00',
									  '10/28/2010 9:36:00',
									   '10/28/2010 11:35:00',
										'10/28/2010 13:34:00',
										 '10/28/2010 15:33:00'],
							y: [2665513,
							 2300921,
							  1663229,
							   1622528,
								1472847,
								 1354026,
								  1348909,
								   1514946,
									1746392,
									 2020481,
									  2312976,
									   2539210,
										2657505,
										 2369938,
										  1869805]
						}
			}],
			seriesStyles: [{
				fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8
			}],
			seriesHoverStyles: [{
				"stroke-width": 1.5, opacity: 1
			}]
		});
	});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Dark</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<h3>
				Gamers Online</h3>
			<div id="wijbarchart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px; background: #242529;">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
			
		This sample shows how to customize a wijbarchart theme with styles.
			</p>
		</div>
	</div>
</body>
</html>
